<!-- # src/App.vue -->
<template>
  <div id="app">
    <button @click="openDialog">弹框</button>

    <button @click="changeMode">切换模式</button>
    {{editMode}}
    <button @click="getHtml">获取html</button>
    <button @click="getControlValue">获取控件值</button>
    <vue-tinymce id="myTinymce" v-model="content" :setting="setting" :setup="setup" />  
    生成的HTML ： 
    <div class="my-html" v-html="content">{{content}}</div>
  </div>
</template>

<script>
var specialChars = [
  { text: "exclamation mark", value: "!" },
  { text: "at", value: "@" },
  { text: "hash", value: "#" },
  { text: "dollars", value: "$" },
  { text: "percent sign", value: "%" },
  { text: "caret", value: "^" },
  { text: "ampersand", value: "&" },
  { text: "asterisk", value: "*" },
];
// ------------------------ radio选择点击+按钮问题  只读预览模式时要隐藏操作按钮+   添加加粗删除线等操作控件事件值有问题
export default {
  name: "app",
  data() {
    return {
        content: `<p style="padding-left: 40px;">姓名：<span id="span1" class="control" style="display: inline-block; margin: 0 5px;" contenteditable="false" data-control="{&quot;body&quot;:{&quot;type&quot;:&quot;panel&quot;,&quot;items&quot;:[{&quot;type&quot;:&quot;selectbox&quot;,&quot;name&quot;:&quot;select&quot;,&quot;label&quot;:&quot;控件&quot;,&quot;items&quot;:[{&quot;value&quot;:&quot;input&quot;,&quot;text&quot;:&quot;input&quot;},{&quot;value&quot;:&quot;date&quot;,&quot;text&quot;:&quot;date&quot;},{&quot;value&quot;:&quot;radio&quot;,&quot;text&quot;:&quot;radio&quot;},{&quot;value&quot;:&quot;checkbox&quot;,&quot;text&quot;:&quot;checkbox&quot;},{&quot;value&quot;:&quot;select&quot;,&quot;text&quot;:&quot;select&quot;}]},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;name&quot;,&quot;label&quot;:&quot;字段名称&quot;}]},&quot;initialData&quot;:{&quot;select&quot;:&quot;input&quot;,&quot;name&quot;:&quot;姓名&quot;}}" data-name="姓名" data-value=""> <span style="display: inline-block; min-width: 100px; border-bottom: 1px solid;" contenteditable="true">小明 </span> <span class="c-menu" style="padding: 0 5px;">✚</span> </span></p>
<p style="padding-left: 40px;">性别：<span id="span1" class="control" style="display: inline-block; margin: 0 5px;" contenteditable="false" data-control="{&quot;body&quot;:{&quot;type&quot;:&quot;panel&quot;,&quot;items&quot;:[{&quot;type&quot;:&quot;selectbox&quot;,&quot;name&quot;:&quot;select&quot;,&quot;label&quot;:&quot;控件&quot;,&quot;items&quot;:[{&quot;value&quot;:&quot;input&quot;,&quot;text&quot;:&quot;input&quot;},{&quot;value&quot;:&quot;date&quot;,&quot;text&quot;:&quot;date&quot;},{&quot;value&quot;:&quot;radio&quot;,&quot;text&quot;:&quot;radio&quot;},{&quot;value&quot;:&quot;checkbox&quot;,&quot;text&quot;:&quot;checkbox&quot;},{&quot;value&quot;:&quot;select&quot;,&quot;text&quot;:&quot;select&quot;}]},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;name&quot;,&quot;label&quot;:&quot;字段名称&quot;},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:1,&quot;items&quot;:[{&quot;type&quot;:&quot;button&quot;,&quot;name&quot;:&quot;add&quot;,&quot;text&quot;:&quot;添加子项&quot;},{&quot;type&quot;:&quot;button&quot;,&quot;name&quot;:&quot;del&quot;,&quot;text&quot;:&quot;删除子项&quot;},{&quot;type&quot;:&quot;collection&quot;,&quot;name&quot;:&quot;collection&quot;,&quot;label&quot;:&quot;&quot;},{&quot;type&quot;:&quot;collection&quot;,&quot;name&quot;:&quot;collection1&quot;,&quot;label&quot;:&quot;&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:1,&quot;items&quot;:[{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label1&quot;,&quot;label&quot;:&quot;标签1&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value1&quot;,&quot;label&quot;:&quot;值1&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label2&quot;,&quot;label&quot;:&quot;标签2&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value2&quot;,&quot;label&quot;:&quot;值2&quot;}]}]}]},&quot;initialData&quot;:{&quot;select&quot;:&quot;radio&quot;,&quot;name&quot;:&quot;性别&quot;,&quot;add&quot;:&quot;&quot;,&quot;del&quot;:&quot;&quot;,&quot;collection&quot;:[],&quot;collection1&quot;:[],&quot;label1&quot;:&quot;男&quot;,&quot;value1&quot;:&quot;男&quot;,&quot;label2&quot;:&quot;女&quot;,&quot;value2&quot;:&quot;女&quot;}}" data-name="性别" data-value="男"> <label contenteditable="true"><input class="c-form" checked="checked" name="radio_1650606040340" type="radio" value="男"> 男</label><label contenteditable="true"><input class="c-form" name="radio_1650606040340" type="radio" value="女"> 女</label> <span class="c-menu" style="padding: 0 5px;">✚</span> </span></p>
<p style="padding-left: 40px;">出生日期：<span id="span1" class="control" style="display: inline-block; margin: 0 5px;" contenteditable="false" data-control="{&quot;body&quot;:{&quot;type&quot;:&quot;panel&quot;,&quot;items&quot;:[{&quot;type&quot;:&quot;selectbox&quot;,&quot;name&quot;:&quot;select&quot;,&quot;label&quot;:&quot;控件&quot;,&quot;items&quot;:[{&quot;value&quot;:&quot;input&quot;,&quot;text&quot;:&quot;input&quot;},{&quot;value&quot;:&quot;date&quot;,&quot;text&quot;:&quot;date&quot;},{&quot;value&quot;:&quot;radio&quot;,&quot;text&quot;:&quot;radio&quot;},{&quot;value&quot;:&quot;checkbox&quot;,&quot;text&quot;:&quot;checkbox&quot;},{&quot;value&quot;:&quot;select&quot;,&quot;text&quot;:&quot;select&quot;}]},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;name&quot;,&quot;label&quot;:&quot;字段名称&quot;}]},&quot;initialData&quot;:{&quot;select&quot;:&quot;date&quot;,&quot;name&quot;:&quot;出生日期&quot;}}" data-name="出生日期" data-value="2022-04-30"> <input class="c-form" contenteditable="true" name="date_1650606053874" type="date" value="2022-04-30"> <span class="c-menu" style="padding: 0 5px;">✚</span> </span></p>
<p style="padding-left: 40px;">爱好：<span id="span1" class="control" style="display: inline-block; margin: 0 5px;" contenteditable="false" data-control="{&quot;body&quot;:{&quot;type&quot;:&quot;panel&quot;,&quot;items&quot;:[{&quot;type&quot;:&quot;selectbox&quot;,&quot;name&quot;:&quot;select&quot;,&quot;label&quot;:&quot;控件&quot;,&quot;items&quot;:[{&quot;value&quot;:&quot;input&quot;,&quot;text&quot;:&quot;input&quot;},{&quot;value&quot;:&quot;date&quot;,&quot;text&quot;:&quot;date&quot;},{&quot;value&quot;:&quot;radio&quot;,&quot;text&quot;:&quot;radio&quot;},{&quot;value&quot;:&quot;checkbox&quot;,&quot;text&quot;:&quot;checkbox&quot;},{&quot;value&quot;:&quot;select&quot;,&quot;text&quot;:&quot;select&quot;}]},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;name&quot;,&quot;label&quot;:&quot;字段名称&quot;},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:1,&quot;items&quot;:[{&quot;type&quot;:&quot;button&quot;,&quot;name&quot;:&quot;add&quot;,&quot;text&quot;:&quot;添加子项&quot;},{&quot;type&quot;:&quot;button&quot;,&quot;name&quot;:&quot;del&quot;,&quot;text&quot;:&quot;删除子项&quot;},{&quot;type&quot;:&quot;collection&quot;,&quot;name&quot;:&quot;collection&quot;,&quot;label&quot;:&quot;&quot;},{&quot;type&quot;:&quot;collection&quot;,&quot;name&quot;:&quot;collection1&quot;,&quot;label&quot;:&quot;&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:1,&quot;items&quot;:[{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label1&quot;,&quot;label&quot;:&quot;标签1&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value1&quot;,&quot;label&quot;:&quot;值1&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label2&quot;,&quot;label&quot;:&quot;标签2&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value2&quot;,&quot;label&quot;:&quot;值2&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label3&quot;,&quot;label&quot;:&quot;标签3&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value3&quot;,&quot;label&quot;:&quot;值3&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label4&quot;,&quot;label&quot;:&quot;标签4&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value4&quot;,&quot;label&quot;:&quot;值4&quot;}]}]}]},&quot;initialData&quot;:{&quot;select&quot;:&quot;checkbox&quot;,&quot;name&quot;:&quot;爱好&quot;,&quot;add&quot;:&quot;&quot;,&quot;del&quot;:&quot;&quot;,&quot;collection&quot;:[],&quot;collection1&quot;:[],&quot;label1&quot;:&quot;吃饭&quot;,&quot;value1&quot;:&quot;吃饭&quot;,&quot;label2&quot;:&quot;睡觉&quot;,&quot;value2&quot;:&quot;睡觉&quot;,&quot;label3&quot;:&quot;打游戏&quot;,&quot;value3&quot;:&quot;打游戏&quot;,&quot;label4&quot;:&quot;看电影&quot;,&quot;value4&quot;:&quot;看电影&quot;}}" data-name="爱好" data-value="吃饭,睡觉,打游戏,看电影"> <label contenteditable="true"><input class="c-form" name="checkbox_1650606070237" type="checkbox" value="吃饭"> 吃饭</label><label contenteditable="true"><input class="c-form" name="checkbox_1650606070237" type="checkbox" value="睡觉"> 睡觉</label><label contenteditable="true"><input class="c-form" name="checkbox_1650606070237" type="checkbox" value="打游戏"> 打游戏</label><label contenteditable="true"><input class="c-form" name="checkbox_1650606070237" type="checkbox" value="看电影"> 看电影</label> <span class="c-menu" style="padding: 0 5px;">✚</span> </span></p>
<p style="padding-left: 40px;">职业：<span id="span1" class="control" style="display: inline-block; margin: 0 5px;" contenteditable="false" data-control="{&quot;body&quot;:{&quot;type&quot;:&quot;panel&quot;,&quot;items&quot;:[{&quot;type&quot;:&quot;selectbox&quot;,&quot;name&quot;:&quot;select&quot;,&quot;label&quot;:&quot;控件&quot;,&quot;items&quot;:[{&quot;value&quot;:&quot;input&quot;,&quot;text&quot;:&quot;input&quot;},{&quot;value&quot;:&quot;date&quot;,&quot;text&quot;:&quot;date&quot;},{&quot;value&quot;:&quot;radio&quot;,&quot;text&quot;:&quot;radio&quot;},{&quot;value&quot;:&quot;checkbox&quot;,&quot;text&quot;:&quot;checkbox&quot;},{&quot;value&quot;:&quot;select&quot;,&quot;text&quot;:&quot;select&quot;}]},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;name&quot;,&quot;label&quot;:&quot;字段名称&quot;},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:1,&quot;items&quot;:[{&quot;type&quot;:&quot;button&quot;,&quot;name&quot;:&quot;add&quot;,&quot;text&quot;:&quot;添加子项&quot;},{&quot;type&quot;:&quot;button&quot;,&quot;name&quot;:&quot;del&quot;,&quot;text&quot;:&quot;删除子项&quot;},{&quot;type&quot;:&quot;collection&quot;,&quot;name&quot;:&quot;collection&quot;,&quot;label&quot;:&quot;&quot;},{&quot;type&quot;:&quot;collection&quot;,&quot;name&quot;:&quot;collection1&quot;,&quot;label&quot;:&quot;&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:1,&quot;items&quot;:[{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label1&quot;,&quot;label&quot;:&quot;标签1&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value1&quot;,&quot;label&quot;:&quot;值1&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label2&quot;,&quot;label&quot;:&quot;标签2&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value2&quot;,&quot;label&quot;:&quot;值2&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label3&quot;,&quot;label&quot;:&quot;标签3&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value3&quot;,&quot;label&quot;:&quot;值3&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label4&quot;,&quot;label&quot;:&quot;标签4&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value4&quot;,&quot;label&quot;:&quot;值4&quot;}]},{&quot;type&quot;:&quot;grid&quot;,&quot;columns&quot;:2,&quot;items&quot;:[{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;label5&quot;,&quot;label&quot;:&quot;标签5&quot;},{&quot;type&quot;:&quot;input&quot;,&quot;name&quot;:&quot;value5&quot;,&quot;label&quot;:&quot;值5&quot;}]}]}]},&quot;initialData&quot;:{&quot;select&quot;:&quot;select&quot;,&quot;name&quot;:&quot;职业&quot;,&quot;add&quot;:&quot;&quot;,&quot;del&quot;:&quot;&quot;,&quot;collection&quot;:[],&quot;collection1&quot;:[],&quot;label1&quot;:&quot;医生&quot;,&quot;value1&quot;:&quot;医生&quot;,&quot;label2&quot;:&quot;老师&quot;,&quot;value2&quot;:&quot;老师&quot;,&quot;label3&quot;:&quot;律师&quot;,&quot;value3&quot;:&quot;律师&quot;,&quot;label4&quot;:&quot;程序员&quot;,&quot;value4&quot;:&quot;程序员&quot;,&quot;label5&quot;:&quot;其他&quot;,&quot;value5&quot;:&quot;其他&quot;}}" data-name="职业" data-value="程序员"><select class="c-form" contenteditable="true" name="select_1650606081391">
<option label="医生" value="医生"></option>
<option label="老师" value="老师"></option>
<option label="律师" value="律师"></option>
<option label="程序员" selected="selected" value="程序员"></option>
<option label="其他" value="其他"></option>
</select><span class="c-menu" style="padding: 0 5px;">✚</span> </span></p>`,
        editMode:'设计模式',
        setting: {
            menubar: 'file edit view insert format tools table tc help',
            toolbar:
            "control | template preview | undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat | help | print",
            // toolbar_drawer: "sliding",
            quickbars_selection_toolbar:
            "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
            plugins: "template preview link image media table lists fullscreen quickbars help control",
            language: "zh_CN", //本地化设置
            height: 500,              
            templates: [
                {
                    title: "Some title 1",
                    description: "Some desc 1",
                    content: '<input type="text" />',
                },
                {
                    title: "Some title 2",
                    description: "Some desc 2",
                    content: '15111',
                },
            ], 
        },       
        setup:function (editor) {
                var onAction = function (autocompleteApi, rng, value) {
                editor.selection.setRng(rng);
                editor.insertContent(value);
                autocompleteApi.hide();
                };

                var getMatchedChars = function (pattern) {
                return specialChars.filter(function (char) {
                    return char.text.indexOf(pattern) !== -1;
                });
                };

                /* An autocompleter that allows you to insert special characters */
                editor.ui.registry.addAutocompleter('specialchars', {
                ch: ':',
                minChars: 1,
                columns: 'auto',
                onAction: onAction,
                fetch: function (pattern) {
                    return new Promise(function (resolve) {
                    var results = getMatchedChars(pattern).map(function (char) {
                        return {
                        type: 'autocompleteitem',
                        value: char.value,
                        text: char.text,
                        icon: char.value
                        }
                    });
                    resolve(results);
                    });
                }
                });
            }     
    }
  },
  created(){
  },
  methods:{
    openDialog(){
        this.$tinymce.activeEditor.windowManager.open({
        title: 'Dialog Title', // The dialog's title - displayed in the dialog header
        body: {
            type: 'panel', // The root body type - a Panel or TabPanel
            items: [ // A list of panel components
            {
                type: 'htmlpanel', // A HTML panel component
                html: 'Panel content goes here.'
            }
            ]
        },
        buttons: [ // A list of footer buttons
            {
            type: 'submit',
            text: 'OK'
            }
        ]
        });
    },
    //   切换模式
    changeMode(){
        if(this.editMode == '设计模式'){
            this.$tinymce.activeEditor.mode.set('readonly');//只读模式
            this.editMode = '只读模式'
        }else{
            this.$tinymce.activeEditor.mode.set('design');//设计模式
            this.editMode = '设计模式'
        }        
    },
    // 获取html
    getHtml(){
        console.log(this.content)
    },
    // 获取控件值
    getControlValue(){
        this.$tinymce.activeEditor.getControlValue()
    }
  }
};
</script>
<style scoped>
button{
    margin:0 10px;
}
.my-html .c-menu{
    display: none;
}
</style>